<template>
  <div class="product-detail-container">
    <div class="navbar">
      <div class="navbar-back" @click="$router.go(-1)">
        <i class="fas fa-arrow-left"></i>
      </div>
      <div class="navbar-title">商品详情</div>
      <div>
        <i class="fas fa-share-alt"></i>
      </div>
    </div>
    
    <div v-if="loading" class="loading-container">
      <div class="loading-spinner"></div>
      <p>加载中...</p>
    </div>
    
    <div v-else-if="!product || (product && product.delete === 1)" class="error-state">
      <i class="fas fa-exclamation-circle fa-3x"></i>
      <p>商品不存在或已下架</p>
      <router-link to="/products" class="back-btn">返回商品列表</router-link>
    </div>
    
    <div v-else class="product-content">
      <!-- 商品图片轮播 -->
      <div class="product-gallery">
        <div class="gallery-main">
          <img :src="product.mainImage" :alt="product.name">
        </div>
      </div>
      
      <!-- 商品信息 -->
      <div class="product-info">
        <div class="price-row">
          <div class="product-price">¥{{ product.price }}</div>
          <div v-if="product.originalPrice" class="product-original-price">¥{{ product.originalPrice }}</div>
        </div>
        
        <h1 class="product-title">{{ product.name }}</h1>
        
        <div class="product-meta">
          <div class="meta-item">销量: {{ product.salesCount || 0 }}</div>
          <div class="meta-item">评价: {{ product.reviewCount || 0 }}</div>
          <div>收藏: {{ favoriteCount || 0 }}</div>
        </div>
      </div>
      
      <!-- 商店信息 -->
      <div class="store-section" @click="goToStore(product.storeId)">
        <img class="store-logo" :src="storeInfo?.coverImage || product.storeImage" alt="商店logo">
        <div class="store-info">
          <div class="store-name">{{ storeInfo?.name}}</div>
          <div class="store-meta">
            <div v-if="storeLoading" class="store-loading">加载中...</div>
            <template v-else>
              <div class="store-rating">评分 {{ formatRating(storeInfo?.rating) }}</div>
              <div class="store-visits">{{ storeInfo?.followerCount || 0 }}人关注</div>
            </template>
          </div>
        </div>
        <div class="view-store-btn">进店逛逛</div>
      </div>
      
      <!-- 详情区域 -->
      <div class="detail-section">
        <div class="detail-tabs">
          <div 
            v-for="(tab, index) in tabs" 
            :key="index"
            :class="['detail-tab', activeTab === index ? 'active' : '']"
            @click="selectTab(index)"
          >
            {{ tab }}
          </div>
        </div>
        
        <div class="detail-content">
          <!-- 商品详情 -->
          <div v-if="activeTab === 0" class="product-description">
            <div v-html="product.description"></div>
            
            <!-- 视频列表 -->
            <div v-if="productVideos && productVideos.length > 0" class="videos-container">
              <h3 class="videos-section-title">商品视频</h3>
              <div class="video-list">
                <div 
                  v-for="(video, index) in productVideos" 
                  :key="index" 
                  class="video-preview"
                  @click="showVideoPlayer(index)"
                >
                  <img class="video-thumbnail" :src="video.coverImage || product.mainImage" alt="视频预览">
                  <div class="video-play-icon">
                    <i class="fas fa-play"></i>
                  </div>
                  <div class="video-title">{{ video.title || `商品视频 ${index + 1}` }}</div>
                </div>
              </div>
            </div>
            
            <template v-if="product.detailImages && product.detailImages.length">
              <img 
                v-for="(image, index) in product.detailImages" 
                :key="index"
                :src="image" 
                :alt="`商品展示图${index + 1}`" 
                class="product-photo"
              >
            </template>
          </div>
          
          <!-- 规格参数 -->
          <div v-else-if="activeTab === 1" class="product-params">
            <div v-if="loadingSpecs" class="loading-message">正在加载规格参数...</div>
            <template v-else-if="productSpecs && productSpecs.length">
              <div class="spec-table">
                <div class="spec-row" v-for="(spec, index) in productSpecs" :key="index">
                  <div class="spec-name">{{ spec.name || '规格' }}</div>
                  <div class="spec-value">{{ spec.value }}</div>
                </div>
              </div>
            </template>
            <div v-else class="empty-params">
              暂无规格参数
            </div>
          </div>
          
          <!-- 用户评价 -->
          <div v-else-if="activeTab === 2">
            <div class="review-summary">
              <div class="summary-left">
                <div class="review-score-container">
                  <div class="review-score">{{ product.rating || '5.0' }}</div>
                  <div class="rating-stars">
                    <i v-for="n in 5" :key="n" :class="['fas', n <= (product.rating || 5) ? 'fa-star' : 'fa-star-o']"></i>
                  </div>
                </div>
                <div class="review-count">共 {{ reviews.length || 0 }} 条评价</div>
              </div>
              <div class="summary-right" v-if="reviews && reviews.length > 0">
                <div class="positive-rate">{{ calculatePositiveRate(reviews) }}% 好评率</div>
              </div>
            </div>
            
            <!-- 加载中 -->
            <div v-if="reviewsLoading" class="reviews-loading">
              <div class="loading-spinner small"></div>
              <p>评价加载中...</p>
            </div>
            
            <!-- 加载错误 -->
            <div v-else-if="reviewsError" class="reviews-error">
              <i class="fas fa-exclamation-circle"></i>
              <p>评价加载失败</p>
              <button class="retry-button" @click="fetchProductReviews">重试</button>
            </div>
            
            <!-- 有评价数据 -->
            <div v-else-if="reviews && reviews.length" class="reviews-list">
              <div v-for="(review, index) in reviews" :key="index" class="review-item">
                <div class="review-header">
                  <img class="review-avatar" :src="review.avatar || '/image/default-avatar.png'" alt="用户头像">
                  <div class="review-user-info">
                    <div class="review-username">{{ review.username || '匿名用户' }}</div>
                    <div class="review-date">{{ formatDate(review.createdAt) }}</div>
                  </div>
                  <div class="review-rating">
                    <i v-for="n in 5" :key="n" :class="['fas', n <= review.rating ? 'fa-star' : 'fa-star-o']"></i>
                  </div>
                </div>
                <div class="review-content">{{ review.content }}</div>
                <div v-if="review.images && review.images !== 'null'" class="review-photos">
                  <template v-for="(image, imgIdx) in processReviewImages(review.images)">
                    <img 
                      v-if="imgIdx === 1 || (imgIdx === 0 && processReviewImages(review.images).length === 1)" 
                      :key="imgIdx"
                      :src="image" 
                      alt="评价图片" 
                      class="review-photo"
                      @click="viewReviewPhoto(image)"
                    >
                  </template>
                </div>
              </div>
            </div>
            
            <!-- 无评价数据 -->
            <div v-else class="empty-reviews">
              <i class="fas fa-comment-slash"></i>
              <p>暂无评价信息</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 底部操作栏 -->
    <div class="footer-bar">
      <div class="action-btn" @click="goToStore(product?.storeId)">
        <i class="fas fa-store"></i>
        <span class="action-text">店铺</span>
      </div>
      <div class="action-btn" @click="toggleFavorite">
        <i :class="['fa-heart', isFavorite ? 'fas' : 'far']"></i>
        <span class="action-text">收藏</span>
      </div>
      <router-link to="/cart" class="action-btn">
        <i class="fas fa-shopping-cart"></i>
        <span class="action-text">购物车</span>
      </router-link>
      <div class="add-cart-btn" @click="addToCart">加入购物车</div>
      <div class="buy-btn" @click="buyNow">立即购买</div>
    </div>
    
    <!-- 规格选择弹窗 -->
    <div v-if="showSpecSelector" class="spec-selector">
      <div class="spec-selector-mask" @click="showSpecSelector = false"></div>
      <div class="spec-selector-content">
        <div class="spec-header">
          <h3>选择规格</h3>
          <div class="close-btn" @click="showSpecSelector = false">
            <i class="fas fa-times"></i>
          </div>
        </div>
        
        <div class="spec-options">
          <div class="spec-option-list">
            <div 
              v-for="(spec, index) in productSpecs" 
              :key="index"
              :class="['spec-option', selectedSpec?.specId === spec.specId ? 'active' : '']"
              @click="selectSpec(spec)"
            >
              {{ spec.value }}
            </div>
          </div>
        </div>
        
        <div class="spec-actions">
          <button class="spec-confirm" @click="confirmSpecSelection">确认</button>
        </div>
      </div>
    </div>

    <!-- 数量选择弹窗 -->
    <div v-if="showQuantitySelector" class="quantity-selector">
      <div class="quantity-selector-mask" @click="showQuantitySelector = false"></div>
      <div class="quantity-selector-content">
        <div class="quantity-header">
          <h3>{{ isBuyNow ? '立即购买' : '加入购物车' }}</h3>
          <div class="close-btn" @click="showQuantitySelector = false">
            <i class="fas fa-times"></i>
          </div>
        </div>
        
        <div class="quantity-product">
          <img :src="product.mainImage" alt="商品图片" class="quantity-product-image">
          <div class="quantity-product-info">
            <div class="quantity-product-price">¥{{ product.price }}</div>
            <div class="quantity-product-spec">规格：{{ selectedSpec?.value || '请选择规格' }}</div>
          </div>
        </div>
        
        <!-- 规格选择 -->
        <div class="quantity-spec-wrapper">
          <h4>规格</h4>
          <div class="quantity-spec-list">
            <div 
              v-for="(spec, index) in productSpecs" 
              :key="index"
              :class="['quantity-spec-option', selectedSpec?.specId === spec.specId ? 'active' : '']"
              @click="selectSpec(spec)"
            >
              {{ spec.value }}
            </div>
          </div>
        </div>
        
        <div class="quantity-control-wrapper">
          <h4>数量</h4>
          <div class="quantity-control">
            <button class="quantity-btn" @click="decreaseQuantity" :disabled="quantity <= 1">-</button>
            <input type="number" v-model.number="quantity" min="1">
            <button class="quantity-btn" @click="increaseQuantity">+</button>
          </div>
        </div>
        
        <div class="quantity-actions">
          <button class="quantity-confirm" @click="confirmAddToCart">{{ isBuyNow ? '立即购买' : '确定' }}</button>
        </div>
      </div>
    </div>

    <!-- 视频播放弹窗 -->
    <div v-if="showVideo && productVideos && productVideos.length > 0 && currentVideoIndex >= 0" class="video-player-modal">
      <div class="video-modal-mask" @click="closeVideo"></div>
      <div class="video-modal-content">
        <div class="video-modal-header">
          <div class="video-modal-title">{{ productVideos[currentVideoIndex].title || `商品视频 ${currentVideoIndex + 1}` }}</div>
          <div class="video-close-btn" @click="closeVideo">
            <i class="fas fa-times"></i>
          </div>
        </div>
        <div class="video-player-container">
          <video 
            ref="videoPlayer"
            class="video-player"
            controls
            autoplay
            :src="productVideos[currentVideoIndex].videoUrl"
          ></video>
        </div>
        <div class="video-navigation" v-if="productVideos.length > 1">
          <div 
            class="video-nav-btn prev" 
            @click="playPreviousVideo"
            :class="{ 'disabled': currentVideoIndex === 0 }"
          >
            <i class="fas fa-chevron-left"></i>
          </div>
          <div class="video-index">{{ currentVideoIndex + 1 }}/{{ productVideos.length }}</div>
          <div 
            class="video-nav-btn next" 
            @click="playNextVideo"
            :class="{ 'disabled': currentVideoIndex === productVideos.length - 1 }"
          >
            <i class="fas fa-chevron-right"></i>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import api from '@/network/api'
import { showDialog } from 'vant'

export default {
  name: 'ProductDetailView',
  data() {
    return {
      loading: true,
      error: null,
      product: null,
      storeInfo: null,
      storeLoading: false,
      activeImageIndex: 0,
      activeTab: 0,
      tabs: ['商品详情', '规格参数', '用户评价'],
      showSpecSelector: false,
      showQuantitySelector: false,
      selectedSpec: null,
      quantity: 1,
      deliveryAddress: '北京市朝阳区', // 默认地址，实际应该从用户信息获取
      isFavorite: false,
      showVideo: false,
      favorite: null,
      favoriteCount: 0,
      productSpecs: [],
      loadingSpecs: false,
      isBuyNow: false, // 添加标志，用于区分是否为立即购买操作
      reviews: [], // 用于存储评价数据
      reviewsLoading: false, // 评价加载状态
      reviewsError: null, // 评价加载错误
      productVideos: [], // 存储商品视频信息列表
      currentVideoIndex: -1, // 当前播放的视频索引
      videoLoading: false // 视频加载状态
    }
  },
  computed: {
    activeImage() {
      if (!this.product || !this.product.images || this.product.images.length === 0) {
        return ''
      }
      return this.product.images[this.activeImageIndex]
    },
    productId() {
      return this.$route.params.id
    }
  },
  methods: {
    async fetchProductDetail() {
      try {
        this.loading = true
        const response = await api.getProductsById(parseInt(this.productId))
        
        if (response.data && response.data.code === 100) {
          this.product = response.data.data
          console.log("1111111111111",this.product)
          
          // 检查商品是否已下架
          if (this.product && this.product.delete === 1) {
            console.log("商品已下架:", this.productId);
            // 如果商品已下架，不需要继续获取其他相关信息
            this.loading = false;
            return;
          }
          
          // 如果有规格，默认选择第一个
          if (this.product.specifications && this.product.specifications.length > 0) {
            this.selectedSpec = this.product.specifications[0]
          }
          
          // 获取商店信息 - 使用新的API通过productId获取
          await this.fetchStoreInfo(this.productId)
          
          // 获取收藏数量
          await this.fetchFavoriteCount()
          
          // 检查是否已收藏
          try {
            const favoriteResponse = await api.checkFavorite('product', this.productId)
            // 如果有返回数据则表示已收藏
            this.favorite = favoriteResponse.data;
            this.isFavorite = !!favoriteResponse.data
          } catch (err) {
            // 如果检查收藏失败，保持未收藏状态
            this.isFavorite = false
          }
          
          // 获取商品视频
          await this.fetchProductVideos()
        } else {
          this.error = new Error(response.data?.message || '获取商品详情失败')
          this.product = null
        }
        
        this.loading = false
      } catch (error) {
        console.error('Error fetching product details:', error)
        this.error = error
        this.loading = false
        this.product = null
      }
    },
    
    async fetchStoreInfo(productId) {
      try {
        this.storeLoading = true
        // 使用新的API直接通过productId获取商店信息
        const response = await api.getStoreByProductId(productId)
        if (response.data && response.data.code === 100) {
          this.storeInfo = response.data.data
        }
      } catch (error) {
        console.error('Error fetching store info:', error)
        // 商店信息获取失败不影响商品详情显示
      } finally {
        this.storeLoading = false
      }
    },
    
    formatDate(dateString) {
      if (!dateString) return '未知日期';
      try {
        const date = new Date(dateString);
        return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
      } catch (error) {
        console.error('日期格式化错误:', error);
        return '日期错误';
      }
    },
    
    // 格式化评分，四舍五入到一位小数
    formatRating(rating) {
      if (rating === undefined || rating === null) return '暂无';
      return (Math.round(rating * 10) / 10).toFixed(1);
    },
    
    selectSpec(spec) {
      console.log('选择的规格:', spec);
      this.selectedSpec = spec;
      
      // 更新显示在界面上的规格信息
      if (this.product) {
        // 如果没有库存信息，使用默认值
        const stock = this.product.stock || 999;
        if (stock < this.quantity) {
          this.quantity = stock;
        }
      }
    },
    
    confirmSpecSelection() {
      // 关闭规格选择弹窗
      this.showSpecSelector = false;
      
      // 如果用户没有选择规格，默认选择第一个
      if (!this.selectedSpec && this.productSpecs && this.productSpecs.length > 0) {
        this.selectedSpec = this.productSpecs[0];
      }
      
      console.log('已确认选择规格:', this.selectedSpec);
      
      // 如果是立即购买操作，则直接调用confirmBuyNow方法
      if (this.isBuyNow) {
        this.confirmBuyNow();
        // 重置标志
        this.isBuyNow = false;
      }
    },
    
    increaseQuantity() {
      this.quantity++
    },
    
    decreaseQuantity() {
      if (this.quantity > 1) {
        this.quantity--
      }
    },
    
    async fetchFavoriteCount() {
      try {
        const response = await api.getFavoriteNumber('product', this.productId)
        if (response.data && response.data.code === 100) {
          this.favoriteCount = response.data.data
        }
      } catch (error) {
        console.error('Error fetching favorite count:', error)
        this.favoriteCount = 0
      }
    },
    
    async toggleFavorite() {
      try {
        if (this.isFavorite) {
          // 取消收藏 - 使用type和id参数
          await api.removeFavorite('product', this.productId)
        } else {
          // 添加收藏
          const response = await api.addFavorite('product', this.productId)
          // 保存收藏的ID，以便后续删除使用
          if (response && response.data) {
            this.product.favoriteId = response.data.id
          }
        }
        // 重新检查收藏状态
        const favoriteResponse = await api.checkFavorite('product', this.productId)
        this.favorite = favoriteResponse.data
        this.isFavorite = !!favoriteResponse.data
        
        // 更新收藏数量
        await this.fetchFavoriteCount()
      } catch (error) {
        console.error('Error toggling favorite:', error)
        // 显示错误信息
        this.$toast?.error('收藏操作失败，请重试')
      }
    },
    
    addToCart() {
      // 先获取规格参数
      if (this.productId && (!this.productSpecs || this.productSpecs.length === 0)) {
        this.fetchProductSpecs().then(() => {
          // 如果有规格参数但没有选择规格，默认选择第一个
          if (this.productSpecs && this.productSpecs.length > 0 && !this.selectedSpec) {
            this.selectedSpec = this.productSpecs[0];
          }
          
          // 显示数量选择器（包含规格选择）
          this.showQuantitySelector = true;
        });
      } else {
        // 已有规格参数
        // 如果有规格参数但没有选择规格，默认选择第一个
        if (this.productSpecs && this.productSpecs.length > 0 && !this.selectedSpec) {
          this.selectedSpec = this.productSpecs[0];
        }
        
        // 显示数量选择器（包含规格选择）
        this.showQuantitySelector = true;
      }
    },
    
    async confirmAddToCart() {
      try {
        // 获取规格ID
        let specId;
        
        // 如果用户已选择规格，使用已选规格的specId
        if (this.selectedSpec && this.selectedSpec.specId) {
          specId = this.selectedSpec.specId;
        } 
        // 如果用户没有选择规格但有规格参数，默认选择第一个
        else if (this.productSpecs && this.productSpecs.length > 0) {
          // 默认选择第一个规格
          this.selectedSpec = this.productSpecs[0];
          specId = this.productSpecs[0].specId;
        }
        // 没有规格时设为0或默认值
        else {
          specId = 0;
        }
        
        // 如果是立即购买操作
        if (this.isBuyNow) {
          await this.confirmBuyNow();
          // 重置标志
          this.isBuyNow = false;
          return;
        }
        
        // 添加到购物车逻辑
        console.log('Adding to cart with specId:', specId);
        
        // 调用添加到购物车API，添加规格ID参数
        const response = await api.addToCart(this.product.productId, this.quantity, specId);
        
        // 检查响应是否包含库存不足信息
        if (response && response.data && response.data.data === "库存不足") {
          // 使用对话框显示库存不足提示
          showDialog({
            title: '库存提示',
            message: '该商品库存不足，请稍后再试或选择其他商品',
          });
        } 
        // 也检查response.data直接等于"库存不足"的情况
        else if (response && response.data === "库存不足") {
          showDialog({
            title: '库存提示',
            message: '该商品库存不足，请稍后再试或选择其他商品',
          });
        } else {
          // 添加成功
          this.$toast?.success('成功加入购物车');
          this.showQuantitySelector = false;
          this.showSpecSelector = false;
          // 重置数量
          this.quantity = 1;
        }
      } catch (error) {
        console.error('Error adding to cart:', error);
        
        // 检查错误是否包含库存不足信息
        if (error.response && error.response.data && error.response.data.data === "库存不足") {
          showDialog({
            title: '库存提示',
            message: '该商品库存不足，请稍后再试或选择其他商品',
          });
        } 
        // 也检查error.message是否包含"库存不足"
        else if (error.message && error.message.includes("库存不足")) {
          showDialog({
            title: '库存提示',
            message: '该商品库存不足，请稍后再试或选择其他商品',
          });
        } else {
          this.$toast?.error('添加失败，请重试');
        }
      }
    },
    
    buyNow() {
      // 先获取规格参数
      if (this.productId && (!this.productSpecs || this.productSpecs.length === 0)) {
        this.fetchProductSpecs().then(() => {
          // 如果有规格参数但没有选择规格，默认选择第一个
          if (this.productSpecs && this.productSpecs.length > 0 && !this.selectedSpec) {
            this.selectedSpec = this.productSpecs[0];
          }
          
          // 设置标志，表示这是立即购买操作
          this.isBuyNow = true;
          // 显示数量选择器（包含规格选择）
          this.showQuantitySelector = true;
        });
      } else {
        // 已有规格参数
        // 如果有规格参数但没有选择规格，默认选择第一个
        if (this.productSpecs && this.productSpecs.length > 0 && !this.selectedSpec) {
          this.selectedSpec = this.productSpecs[0];
        }
        
        // 设置标志，表示这是立即购买操作
        this.isBuyNow = true;
        // 显示数量选择器（包含规格选择）
        this.showQuantitySelector = true;
      }
    },
    
    async confirmBuyNow() {
      // 获取规格ID
      let specId = 0;
      
      if (this.selectedSpec && this.selectedSpec.specId) {
        specId = this.selectedSpec.specId;
      } else if (this.productSpecs && this.productSpecs.length > 0) {
        // 如果没有选择规格但有规格参数，选择第一个
        this.selectedSpec = this.productSpecs[0];
        specId = this.productSpecs[0].specId;
      }
      
      console.log('Buy now with specId:', specId, 'quantity:', this.quantity);
      
      try {
        // 直接检查库存，不添加到购物车
        let hasStock = true;
        
        try {
          // 如果后端有checkStock API可以调用
          const stockResponse = await api.checkProductStock(this.product.productId, this.quantity, specId);
          if (stockResponse && stockResponse.data && !stockResponse.data.hasStock) {
            hasStock = false;
          }
        } catch (stockError) {
          // 如果没有专门的检查库存API，可以尝试获取商品详情来检查库存
          const productResponse = await api.getProductsById(parseInt(this.productId));
          if (productResponse.data && productResponse.data.code === 100) {
            const productData = productResponse.data.data;
            if (productData.stock !== undefined && productData.stock < this.quantity) {
              hasStock = false;
            }
          }
        }
        
        if (!hasStock) {
          showDialog({
            title: '库存提示',
            message: '该商品库存不足，请稍后再试或选择其他商品',
          });
          return; // 终止购买流程
        }
        
        // 如果库存充足，继续购买流程
        // 获取商品价格 - 确保使用数字类型进行计算
        const productPrice = parseFloat(this.product.price) || 0;
        const totalAmount = (productPrice * this.quantity).toFixed(2);
        
        console.log('商品价格:', productPrice);
        console.log('商品数量:', this.quantity);
        console.log('总金额:', totalAmount);
        
        // 隐藏数量选择器
        this.showQuantitySelector = false;
        
        // 跳转到结算页面，传递商品信息，包括价格
        this.$router.push({
          path: '/checkout',
          query: {
            productId: this.product.productId,
            quantity: this.quantity,
            specificationId: specId,
            price: productPrice.toString(), // 添加商品价格，确保是字符串
            totalAmount: totalAmount, // 计算总金额
            productName: this.product.name, // 添加商品名称
            mainImage: this.product.mainImage || '', // 添加商品图片
            storeId: this.product.storeId || 1, // 添加商店ID
            storeName: this.product.storeName || (this.storeInfo ? this.storeInfo.name : '商店'), // 添加商店名称
            variant: this.selectedSpec ? this.selectedSpec.value : '', // 添加规格信息
            directBuy: 'true' // 标记为直接购买
          }
        });
      } catch (error) {
        console.error('Error during buy now process:', error);
        this.$toast?.error('系统错误，请稍后再试');
      }
    },
    
    goToStore(storeId) {
      if (storeId) {
        this.$router.push({
          name: 'StoreDetail',
          params: { id: storeId }
        })
      }
    },
    
    viewSingleReviewPhoto(imageUrl) {
      if (!imageUrl || imageUrl === 'null') return;
      console.log('查看单张评价图片:', imageUrl);
      // 这里可以添加图片预览功能
    },
    
    // 新方法: 查看评价图片（支持多图）
    viewReviewPhoto(imageUrl) {
      if (!imageUrl) return;
      console.log('查看评价图片:', imageUrl);
      // 这里可以添加图片预览功能，如使用轻量级图片查看器
      try {
        // 如果项目中集成了图片查看器，可以在这里调用
        // 例如使用vant的ImagePreview组件
        if (this.$ImagePreview) {
          this.$ImagePreview([imageUrl]);
        }
      } catch (error) {
        console.error('图片预览失败:', error);
      }
    },
    
    // 处理评价图片
    processReviewImages(imagesStr) {
      if (!imagesStr || imagesStr === 'null') return [];
      
      try {
        // 尝试检测是否是JSON字符串
        if (typeof imagesStr === 'string' && (imagesStr.startsWith('[') || imagesStr.startsWith('{'))) {
          try {
            const parsed = JSON.parse(imagesStr);
            if (Array.isArray(parsed)) {
              return parsed.map(img => {
                // 确保base64图像有正确的前缀
                if (img && typeof img === 'string' && img.startsWith('data:image/png;base64,')) {
                  return img;
                } else if (img && typeof img === 'string' && !img.startsWith('data:')) {
                  return 'data:image/png;base64,' + img;
                }
                return img;
              });
            }
          } catch (e) {
            // 解析失败，继续尝试其他方法
          }
        }
        
        // 尝试以逗号分隔
        if (typeof imagesStr === 'string' && imagesStr.includes(',')) {
          const parts = imagesStr.split(',');
          return parts.map(part => {
            // 确保base64图像有正确的前缀
            if (part && !part.startsWith('data:')) {
              return 'data:image/png;base64,' + part;
            }
            return part;
          });
        }
        
        // 单个图片URL的情况
        // 确保base64图像有正确的前缀
        if (imagesStr && typeof imagesStr === 'string' && !imagesStr.startsWith('data:')) {
          return ['data:image/png;base64,' + imagesStr];
        }
        return [imagesStr];
      } catch (error) {
        console.error('处理评价图片错误:', error);
        return [];
      }
    },
    
    selectTab(index) {
      this.activeTab = index;
      
      // 如果选中规格参数标签，则加载规格参数
      if (index === 1 && this.productId && (!this.productSpecs || this.productSpecs.length === 0)) {
        this.fetchProductSpecs();
      }
      
      // 如果选中用户评价标签，则加载评价数据
      if (index === 2 && this.productId) {
        this.fetchProductReviews();
      }
      
      // 如果选中商品详情标签，确保已加载视频
      if (index === 0 && this.productId && (!this.productVideos || this.productVideos.length === 0) && !this.videoLoading) {
        this.fetchProductVideos();
      }
    },
    
    async fetchProductSpecs() {
      try {
        this.loadingSpecs = true;
        const response = await api.getProductSpecs(parseInt(this.productId));
        
        if (response.data && response.data.code === 100) {
          const specData = response.data.data;
          
          if (!specData) {
            this.productSpecs = [];
          } else if (Array.isArray(specData)) {
            // 新的数据格式是一个数组，每个元素有 specId, productId, name, value
            this.productSpecs = specData.map(spec => ({
              name: spec.name || '规格',
              value: spec.value || '暂无',
              specId: spec.specId
            }));
            
            // 调试日志
            console.log('Formatted product specs array:', this.productSpecs);
          } else {
            // 单个规格对象的情况
            this.productSpecs = [];
            
            // 直接使用name和value字段
            if (specData.name && specData.value) {
              this.productSpecs.push({
                name: specData.name,
                value: specData.value,
                specId: specData.specId
              });
            }
            
            // 调试日志
            console.log('Formatted product specs single:', this.productSpecs);
          }
        } else {
          console.error('Error fetching product specifications:', response.data?.message);
          this.productSpecs = [];
        }
      } catch (error) {
        console.error('Error fetching product specifications:', error);
        this.productSpecs = [];
      } finally {
        this.loadingSpecs = false;
      }
    },
    
    formatSpecName(key) {
      // Convert camelCase or snake_case to readable format
      return key
        .replace(/_/g, ' ')
        .replace(/([A-Z])/g, ' $1')
        .replace(/^./, str => str.toUpperCase());
    },
    
    // 获取商品评价
    async fetchProductReviews() {
      if (this.reviewsLoading) return;
      
      try {
        this.reviewsLoading = true;
        this.reviewsError = null;
        
        const response = await api.getProductReviews(parseInt(this.productId));
        
        console.log('获取到的评价数据:', response);
        
        // 处理后端可能直接返回评价列表而不是包装在Result对象中的情况
        if (response.data && response.data.code === 100) {
          // 标准Result包装的响应
          this.reviews = Array.isArray(response.data.data) ? response.data.data : [];
        } else if (Array.isArray(response.data)) {
          // 直接返回数组的情况
          this.reviews = response.data;
        } else if (typeof response.data === 'object') {
          // 可能是直接返回的单个对象
          this.reviews = [response.data];
        } else {
          this.reviews = [];
        }
        
        console.log('处理后的评价数据:', this.reviews);
          
        // 更新商品的评价信息
        if (this.product && this.reviews.length > 0) {
          this.product.reviews = this.reviews;
          this.product.reviewCount = this.reviews.length;
            
          // 计算平均评分
          const totalRating = this.reviews.reduce((sum, review) => sum + (review.rating || 0), 0);
          this.product.rating = (totalRating / this.reviews.length).toFixed(1);
        }
      } catch (error) {
        console.error('Error fetching product reviews:', error);
        this.reviewsError = error;
        this.reviews = [];
      } finally {
        this.reviewsLoading = false;
      }
    },
    
    // 获取商品视频列表
    async fetchProductVideos() {
      try {
        this.videoLoading = true
        const response = await api.getProductVideo(parseInt(this.productId))
        
        if (response.data && response.data.code === 100 && response.data.data) {
          // 处理返回的视频列表
          const videosData = response.data.data
          
          if (Array.isArray(videosData)) {
            // 如果返回的是数组
            this.productVideos = videosData
          } else {
            // 如果返回的是单个对象，转换为数组
            this.productVideos = [videosData]
          }
          
          console.log('获取到商品视频列表:', this.productVideos)
        } else if (response.data && Array.isArray(response.data)) {
          // 处理直接返回数组的情况
          this.productVideos = response.data
          console.log('获取到商品视频列表(直接数组):', this.productVideos)
        } else {
          console.log('该商品没有视频')
          this.productVideos = []
        }
      } catch (error) {
        console.error('获取商品视频失败:', error)
        this.productVideos = []
      } finally {
        this.videoLoading = false
      }
    },
    
    // 显示视频播放器
    showVideoPlayer(index) {
      if (this.productVideos && this.productVideos.length > index) {
        this.currentVideoIndex = index
        this.showVideo = true
      }
    },
    
    // 关闭视频播放器
    closeVideo() {
      this.showVideo = false
      // 确保视频暂停
      if (this.$refs.videoPlayer) {
        this.$refs.videoPlayer.pause()
      }
    },
    
    // 播放上一个视频
    playPreviousVideo() {
      if (this.currentVideoIndex > 0) {
        this.currentVideoIndex--
      }
    },
    
    // 播放下一个视频
    playNextVideo() {
      if (this.currentVideoIndex < this.productVideos.length - 1) {
        this.currentVideoIndex++
      }
    },
    
    // 计算好评率
    calculatePositiveRate(reviews) {
      if (!reviews || reviews.length === 0) return 100;
      
      const positiveCount = reviews.filter(review => {
        // 评分大于等于4分即为好评
        return (review.rating || 0) >= 4;
      }).length;
      
      const rate = Math.round((positiveCount / reviews.length) * 100);
      return rate;
    },
  },
  created() {
    this.fetchProductDetail()
  },
  watch: {
    '$route.params.id'() {
      // 路由参数变化，重新获取商品详情
      this.fetchProductDetail()
      
      // 如果已经在评价标签，重新加载评价
      if (this.activeTab === 2) {
        this.fetchProductReviews();
      }
    },
    
    // 监听数量选择弹窗状态，在关闭时重置立即购买标志
    showQuantitySelector(newVal) {
      if (!newVal) {
        // 当弹窗关闭时，重置立即购买标志
        this.isBuyNow = false;
      }
    }
  }
}
</script>

<style scoped>
.product-detail-container {
  width: 100%;
  padding-bottom: 70px; /* 为底部操作栏留出空间 */
}

.loading-container, .error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 50vh;
  color: #a0aec0;
}

.loading-spinner {
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3490dc;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: spin 1s linear infinite;
  margin-bottom: 15px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.error-state i {
  margin-bottom: 15px;
}

.back-btn {
  margin-top: 15px;
  padding: 8px 16px;
  background-color: #3490dc;
  color: white;
  border-radius: 5px;
  text-decoration: none;
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  background-color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  position: sticky;
  top: 0;
  z-index: 100;
}

.navbar-back {
  color: #2d3748;
  text-decoration: none;
  cursor: pointer;
  padding: 5px;
}

.navbar-title {
  font-size: 18px;
  font-weight: 500;
}

/* 商品图片轮播 */
.product-gallery {
  background-color: white;
  position: relative;
}

.gallery-main {
  width: 100%;
  height: 300px;
  position: relative;
}

.gallery-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-indicator {
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
}

.gallery-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: rgba(255,255,255,0.5);
  margin: 0 3px;
  cursor: pointer;
}

.gallery-dot.active {
  background-color: white;
}

/* 商品信息 */
.product-info {
  padding: 15px;
  background-color: white;
  margin-bottom: 10px;
}

.price-row {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.product-price {
  font-size: 24px;
  color: #e53e3e;
  font-weight: bold;
}

.product-original-price {
  font-size: 14px;
  color: #a0aec0;
  text-decoration: line-through;
  margin-left: 10px;
}

.product-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #2d3748;
  line-height: 1.4;
}

.product-meta {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #718096;
}

.meta-item {
  margin-right: 15px;
}

/* 商店信息 */
.store-section {
  padding: 15px;
  background-color: white;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}

.store-logo {
  width: 50px;
  height: 50px;
  border-radius: 8px;
  object-fit: cover;
  margin-right: 10px;
}

.store-info {
  flex: 1;
}

.store-name {
  font-size: 16px;
  font-weight: bold;
  color: #2d3748;
  margin-bottom: 5px;
}

.store-meta {
  display: flex;
  font-size: 12px;
  color: #718096;
}

.store-rating {
  margin-right: 10px;
}

.store-visits {
  color: #a0aec0;
}

.store-loading {
  color: #a0aec0;
  font-size: 12px;
  font-style: italic;
}

.view-store-btn {
  padding: 5px 12px;
  border: 1px solid #3490dc;
  border-radius: 15px;
  color: #3490dc;
  font-size: 12px;
}

/* 详情区域 */
.detail-section {
  margin-bottom: 10px;
}

.detail-tabs {
  display: flex;
  background-color: white;
  border-bottom: 1px solid #e2e8f0;
}

.detail-tab {
  flex: 1;
  text-align: center;
  padding: 12px 0;
  font-size: 14px;
  color: #718096;
  cursor: pointer;
}

.detail-tab.active {
  color: #3490dc;
  font-weight: 500;
  position: relative;
}

.detail-tab.active:after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 30%;
  right: 30%;
  height: 2px;
  background-color: #3490dc;
}

.detail-content {
  padding: 15px;
  background-color: white;
}

.product-description {
  font-size: 14px;
  color: #4a5568;
  line-height: 1.6;
}

/* 规格参数 */
.product-params {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 14px;
  padding: 0 5px;
}

.spec-table {
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #ebeef5;
}

.spec-row {
  display: flex;
  border-bottom: 1px solid #ebeef5;
}

.spec-row:last-child {
  border-bottom: none;
}

.spec-name {
  width: 30%;
  padding: 12px 15px;
  background-color: #f8f9fa;
  font-weight: 500;
  color: #606266;
  border-right: 1px solid #ebeef5;
}

.spec-value {
  width: 70%;
  padding: 12px 15px;
  color: #333;
}

.spec-row:nth-child(even) {
  background-color: #fafafa;
}

.param-content {
  padding: 8px 0;
  line-height: 1.4;
  color: #4a5568;
}

.param-item {
  display: inline-block;
  margin-right: 10px;
  margin-bottom: 5px;
  background-color: white;
  padding: 2px 5px;
  font-size: 13px;
}

.loading-message {
  text-align: center;
  color: #a0aec0;
  padding: 20px 0;
  font-style: italic;
}

.empty-params {
  text-align: center;
  padding: 30px 0;
  color: #a0aec0;
}

/* 视频列表样式 */
.videos-container {
  margin: 20px 0;
}

.videos-section-title {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 15px;
  color: #2d3748;
}

.video-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.video-preview {
  width: 100%;
  position: relative;
  margin-bottom: 5px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  border-radius: 10px;
  overflow: hidden;
}

.video-thumbnail {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 8px 8px 0 0;
  transition: transform 0.3s ease;
}

.video-preview:hover .video-thumbnail {
  transform: scale(1.03);
}

.video-play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  background-color: rgba(0,0,0,0.6);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color 0.3s ease;
}

.video-preview:hover .video-play-icon {
  background-color: rgba(52, 144, 220, 0.8);
}

.video-play-icon i {
  color: white;
  font-size: 20px;
}

.video-title {
  font-size: 15px;
  font-weight: 500;
  padding: 10px;
  color: #2d3748;
  background-color: white;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 底部操作栏 */
.footer-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background-color: white;
  display: flex;
  align-items: center;
  box-shadow: 0 -1px 5px rgba(0,0,0,0.05);
  z-index: 50;
}

.action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 20px;
  color: #718096;
  padding: 0 15px;
  cursor: pointer;
  text-decoration: none;
}

.action-text {
  font-size: 10px;
  margin-top: 2px;
}

.buy-btn {
  flex: 1;
  padding: 12px;
  background-color: #ed8936;
  color: white;
  text-align: center;
  margin: 0 10px;
  border-radius: 20px;
  font-weight: 500;
  cursor: pointer;
}

.add-cart-btn {
  flex: 1;
  padding: 12px;
  background-color: #3490dc;
  color: white;
  text-align: center;
  margin-right: 10px;
  border-radius: 20px;
  font-weight: 500;
  cursor: pointer;
}

/* 规格选择器 */
.spec-selector {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.spec-selector-mask {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

.spec-selector-content {
  position: relative;
  background-color: white;
  border-radius: 16px 16px 0 0;
  padding: 20px;
  max-height: 60vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.spec-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: 10px;
}

.spec-header h3 {
  font-size: 16px;
  font-weight: bold;
  color: #2d3748;
}

.close-btn {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.spec-product {
  display: flex;
  padding-bottom: 15px;
  border-bottom: 1px solid #e2e8f0;
  margin-bottom: 15px;
}

.spec-product-image {
  width: 80px;
  height: 80px;
  border-radius: 5px;
  object-fit: cover;
  margin-right: 15px;
}

.spec-product-info {
  flex: 1;
}

.spec-product-price {
  font-size: 18px;
  font-weight: bold;
  color: #e53e3e;
  margin-bottom: 5px;
}

.spec-product-stock, .spec-product-selected {
  font-size: 14px;
  color: #718096;
  margin-top: 5px;
}

.spec-options {
  flex: 1;
  overflow-y: auto;
}

.spec-option-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 15px;
}

.spec-option {
  padding: 10px 15px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: 14px;
  color: #4a5568;
  cursor: pointer;
  transition: all 0.2s;
  line-height: 1.4;
}

.spec-option.active {
  border-color: #3490dc;
  color: #3490dc;
  background-color: #ebf4ff;
  font-weight: 500;
}

.quantity-control {
  display: flex;
  align-items: center;
}

.quantity-btn {
  width: 30px;
  height: 30px;
  border: 1px solid #e2e8f0;
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.quantity-control input {
  width: 50px;
  height: 30px;
  border: 1px solid #e2e8f0;
  text-align: center;
  margin: 0 5px;
}

.spec-actions {
  display: flex;
  margin-top: 20px;
  padding-top: 10px;
  border-top: 1px solid #e2e8f0;
}

.spec-confirm {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 20px;
  font-weight: 500;
  cursor: pointer;
  color: white;
  background-color: #3490dc;
}

.empty-reviews {
  text-align: center;
  padding: 30px 0;
  color: #a0aec0;
}

/* 数量选择器 */
.quantity-selector {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.quantity-selector-mask {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

.quantity-selector-content {
  position: relative;
  background-color: white;
  border-radius: 16px 16px 0 0;
  padding: 20px;
  max-height: 70vh;
  overflow-y: auto;
}

.quantity-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.quantity-header h3 {
  font-size: 16px;
  font-weight: bold;
}

.quantity-product {
  display: flex;
  padding-bottom: 15px;
  border-bottom: 1px solid #e2e8f0;
  margin-bottom: 15px;
}

.quantity-product-image {
  width: 80px;
  height: 80px;
  border-radius: 5px;
  object-fit: cover;
  margin-right: 15px;
}

.quantity-product-info {
  flex: 1;
}

.quantity-product-price {
  font-size: 18px;
  font-weight: bold;
  color: #e53e3e;
  margin-bottom: 5px;
}

.quantity-product-spec {
  font-size: 14px;
  color: #718096;
  margin-top: 5px;
}

.quantity-spec-wrapper {
  margin-bottom: 15px;
}

.quantity-spec-wrapper h4 {
  font-size: 14px;
  margin-bottom: 10px;
  color: #4a5568;
}

.quantity-spec-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 5px;
}

.quantity-spec-option {
  padding: 6px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  font-size: 13px;
  color: #4a5568;
  cursor: pointer;
}

.quantity-spec-option.active {
  border-color: #3490dc;
  color: #3490dc;
  background-color: #ebf4ff;
}

.quantity-control-wrapper {
  margin-bottom: 15px;
}

.quantity-control-wrapper h4 {
  font-size: 14px;
  margin-bottom: 10px;
}

.quantity-control {
  display: flex;
  align-items: center;
}

.quantity-btn:disabled {
  color: #cbd5e0;
  cursor: not-allowed;
}

.quantity-control input {
  width: 50px;
  height: 30px;
  border: 1px solid #e2e8f0;
  text-align: center;
  margin: 0 5px;
}

.quantity-actions {
  margin-top: 30px;
}

.quantity-confirm {
  width: 100%;
  padding: 12px;
  background-color: #3490dc;
  color: white;
  border: none;
  border-radius: 20px;
  font-weight: 500;
  cursor: pointer;
}

@media (min-width: 768px) {
  .gallery-main {
    height: 400px;
  }
  
  .detail-content {
    padding: 20px;
  }
  
  .review-photo {
    width: 100px;
    height: 100px;
  }
}

/* 添加评价加载和错误状态样式 */
.reviews-loading, .reviews-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px 0;
  color: #a0aec0;
}

.loading-spinner.small {
  width: 20px;
  height: 20px;
  border-width: 2px;
  margin-bottom: 10px;
}

.reviews-error i {
  font-size: 24px;
  margin-bottom: 8px;
  color: #e53e3e;
}

.retry-button {
  margin-top: 10px;
  padding: 5px 15px;
  background-color: #3490dc;
  color: white;
  border: none;
  border-radius: 15px;
  font-size: 12px;
  cursor: pointer;
}

.empty-reviews {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
  color: #a0aec0;
}

.empty-reviews i {
  font-size: 36px;
  margin-bottom: 10px;
}

/* 视频播放弹窗样式 */
.video-player-modal {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 300;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.video-modal-mask {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.8);
}

.video-modal-content {
  position: relative;
  width: 90%;
  max-width: 800px;
  background-color: #000;
  border-radius: 8px;
  overflow: hidden;
  z-index: 310;
}

.video-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px;
  background-color: rgba(0, 0, 0, 0.8);
}

.video-modal-title {
  color: white;
  font-size: 16px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 80%;
}

.video-close-btn {
  color: white;
  cursor: pointer;
  font-size: 20px;
}

.video-player-container {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* 16:9 宽高比 */
}

.video-player {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
}

/* 视频导航按钮 */
.video-navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px;
  background-color: rgba(0, 0, 0, 0.8);
}

.video-nav-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.2);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  color: white;
}

.video-nav-btn:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

.video-nav-btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.video-index {
  color: white;
  font-size: 14px;
}

@media (min-width: 640px) {
  .video-list {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .video-preview {
    width: calc(50% - 10px);
  }
  
  .video-thumbnail {
    height: 220px;
  }
}

@media (min-width: 1024px) {
  .video-preview {
    width: calc(33.33% - 14px);
  }
  
  .video-thumbnail {
    height: 240px;
  }
}

/* 评价相关样式改进 */
.review-summary {
  background-color: #f7fafc;
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 15px;
  display: flex;
  justify-content: space-between;
}

.summary-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.summary-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
}

.positive-rate {
  font-size: 16px;
  color: #48bb78;
  font-weight: 500;
  background-color: rgba(72, 187, 120, 0.1);
  padding: 4px 10px;
  border-radius: 20px;
}

.review-score-container {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}

.review-score {
  font-size: 32px;
  font-weight: bold;
  color: #f6993f;
  margin-right: 10px;
}

.rating-stars {
  color: #f6993f;
}

.rating-stars i {
  margin-right: 2px;
}

.review-count {
  color: #718096;
  font-size: 14px;
}

.reviews-list {
  margin-top: 10px;
}

.review-item {
  background-color: white;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 12px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.review-header {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.review-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 10px;
  border: 1px solid #e2e8f0;
}

.review-user-info {
  flex: 1;
}

.review-username {
  font-weight: 500;
  color: #2d3748;
  font-size: 15px;
  margin-bottom: 2px;
}

.review-date {
  color: #a0aec0;
  font-size: 12px;
}

.review-rating {
  color: #f6993f;
  font-size: 14px;
}

.review-content {
  color: #4a5568;
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 10px;
  white-space: pre-wrap;
}

.review-photos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.review-photo {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid #e2e8f0;
  transition: transform 0.2s;
}

.review-photo:hover {
  transform: scale(1.05);
}

@media (min-width: 768px) {
  .review-photo {
    width: 100px;
    height: 100px;
  }
  
  .review-score {
    font-size: 36px;
  }
  
  .rating-stars {
    font-size: 18px;
  }
}
</style> 